import React, { useEffect, useState } from 'react'
import { getDraft } from '../../api/draft'
import { Avatar, List, Pagination } from 'antd'
import SubDraft from './subDraft';
import {
	UserOutlined
} from '@ant-design/icons';

const Video = () => {
  const [page,setPage] = useState(1);
  const [size,setSize] = useState(10);
  const [draft,setDraft] = useState({});
  //const [pagesize,setPagesize] = useState({page:1,size:10})

  useEffect(() => {
    getDraft({page,size})
    .then(res => {
      console.log(res)
      setDraft(res.data)
    })
  },[page,size])

  const changePage = (page,size) => {
    setPage(page)
    setSize(size)
  }

  return (
    <div>
      <SubDraft draft={draft} setDraft={setDraft} />
      {/* <ul>
        {
          draft.content?.map(item => {
            return <li key={item.id}>
              <div>
                {item.draftTitle} ---- 
                {item.draftContext}
              </div>
              <div>
                {item.user.userName} ---- 
                {new Date(item.draftDate).toLocaleString()}
              </div>
            </li>
          })
        }
      </ul> */}
      <List
        itemLayout="horizontal"
        dataSource={draft.content}
        renderItem={(item, index) => (
          <List.Item>
            <List.Item.Meta
              avatar={
                item.user.avatar === null
                ?<Avatar icon={<UserOutlined />} />
                :<Avatar src={`http://8.142.171.141:8080/school-news/user/img?path=${item.user.avatar}`} />
              }
              title={item.draftTitle}
              description={item.user.userName}
            />
            {item.draftContext}
          </List.Item>
        )}
      />

      <Pagination style={{marginTop:50}} defaultCurrent={1} current={page} total={draft.totalPages} onChange={changePage} />
    </div>
  )
}

export default Video